<script setup lang="ts">
import { ref } from 'vue'

// 西医风险评估数据
interface WesternOption {
  key: number
  label: string
  initial: string
}

const generateWesternData = () => {
  const data: WesternOption[] = []
  const items = [
    '血压异常',
    '血糖偏高',
    '心率不齐',
    '肝功能异常',
    '肾功能异常',
    '血脂异常',
    '尿酸偏高',
  ]
  const initials = ['XY', 'XT', 'XL', 'GN', 'SG', 'XZ', 'NS']
  items.forEach((item, index) => {
    data.push({
      label: item,
      key: index,
      initial: initials[index],
    })
  })
  return data
}

const westernData = ref<WesternOption[]>(generateWesternData())
const westernValue = ref<number[]>([])

const westernFilterMethod = (query: string, item: WesternOption) => {
  return item.initial.toLowerCase().includes(query.toLowerCase()) ||
         item.label.includes(query)
}

// 中医体质风险评估数据
interface TCMOption {
  key: number
  label: string
  initial: string
}

const generateTCMData = () => {
  const data: TCMOption[] = []
  const items = [
    '气虚体质',
    '阴虚体质',
    '阳虚体质',
    '痰湿体质',
    '湿热体质',
    '血瘀体质',
    '气郁体质',
  ]
  const initials = ['QX', 'YX', 'YX', 'TS', 'SR', 'XY', 'QY']
  items.forEach((item, index) => {
    data.push({
      label: item,
      key: index,
      initial: initials[index],
    })
  })
  return data
}

const tcmData = ref<TCMOption[]>(generateTCMData())
const tcmValue = ref<number[]>([])

const tcmFilterMethod = (query: string, item: TCMOption) => {
  return item.initial.toLowerCase().includes(query.toLowerCase()) ||
         item.label.includes(query)
}
</script>

<template>
  <div class="risk-assessment-container">
    <div class="page-title">风险评估</div>

    <!-- 综合报告 -->
    <el-card class="report-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>综合报告</span>
        </div>
      </template>
      <div class="report-content">
        <!-- 报告内容区域 -->
      </div>
    </el-card>

    <!-- 建议检查 -->
    <el-card class="suggestion-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>建议检查</span>
        </div>
      </template>
      <div class="suggestion-content">
        <div class="suggestion-actions">
          <el-button type="primary" size="small" class="check-all-btn">全部接收</el-button>
        </div>
      </div>
    </el-card>

    <!-- 建议检查的项目 -->
    <el-card class="check-items-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>建议检查的项目</span>
        </div>
      </template>
      <div class="check-items-content">
        <!-- 检查项目内容区域 -->
      </div>
    </el-card>

    <!-- 西医风险评估 -->
    <el-card class="western-risk-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>西医风险评估</span>
        </div>
      </template>
      <div class="risk-content">
        <el-transfer
          v-model="westernValue"
          filterable
          :filter-method="westernFilterMethod"
          filter-placeholder="搜索异常项"
          :data="westernData"
          :titles="['异常项', '考虑检查']"
          class="risk-transfer"
        />
      </div>
    </el-card>

    <!-- 中医体质风险评估 -->
    <el-card class="tcm-risk-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>中医体质风险评估</span>
        </div>
      </template>
      <div class="risk-content">
        <el-transfer
          v-model="tcmValue"
          filterable
          :filter-method="tcmFilterMethod"
          filter-placeholder="搜索体质类型"
          :data="tcmData"
          :titles="['异常项', '考虑检查']"
          class="risk-transfer"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.risk-assessment-container {
  padding: 16px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-section,
.suggestion-section,
.check-items-section,
.western-risk-section,
.tcm-risk-section {
  margin-bottom: 16px;
  border-radius: 8px;
}

.suggestion-actions {
  display: flex;
  justify-content: flex-end;
}

.check-all-btn {
  margin-left: auto;
}

.risk-transfer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

/* 适配el-transfer组件样式 */
:deep(.el-transfer) {
  width: 100%;
}

:deep(.el-transfer__buttons) {
  padding: 0 10px;
}

:deep(.el-transfer-panel) {
  width: 45%;
  min-width: 0;
}

:deep(.el-transfer-panel__body) {
  height: 300px;
}
</style>
